<template>
  <div>
    <div class = "card" style="margin-bottom: 5px;">
      <el-input style="width: 240px; margin-right: 10px" v-model="data.roomName" placeholder="请输入房间名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="getOrderInformation">查 询</el-button>
      <el-button type="warning" @click="reset">重 置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" border stripe>
        <el-table-column label="订单编号" prop = "id"></el-table-column>
        <el-table-column label="房间编号" prop = "roomId"></el-table-column>
        <el-table-column label="房间名称" prop = "roomName"></el-table-column>
        <el-table-column label="用户姓名" prop = "userName"></el-table-column>
        <el-table-column label="用户手机号" prop = "userPhone"></el-table-column>
        <el-table-column label="支付金额" prop = "payNum"></el-table-column>
        <el-table-column label="入住时间" prop = "inTime" :formatter="formatDate"></el-table-column>
        <el-table-column label="退房时间" prop = "outTime" :formatter="formatDate"></el-table-column>
        <el-table-column label="订单创建时间" prop = "createTime"></el-table-column>
      </el-table>
      <div style="margin-bottom: 15px">
        <el-pagination
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            backgroudr
            layout="total, sizes, prev, pager, next,jumper"
            :total="data.total"
        />
      </div>
    </div>

  </div>

</template>

<script setup>
import { reactive } from "vue";
import request from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus';
const data = reactive({
  roomName:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0
})

const getOrderInformation =()=>{
   request.get('/orders/selectAll',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      status:'3',//订单状态为已入住
      roomName:data.roomName
    }
  }).then(res=>{
    if (res.code === '200'){
      data.tableData = res.data.items
      data.total = res.data.total
    }else {
      ElMessage.error('获取订单数据失败:'+res.msg)
    }

  })
}
getOrderInformation()

const reset = ()=>{
  data.roomName = null
  getOrderInformation()
}

const formatDate = (row, column, cellValue) => {
  return cellValue ? cellValue.split(' ')[0] : '' // 按空格拆分取日期部分
}


</script>